<template>
	<view class="page mine-detail">
		<nav-bar back>{{title[type]}}</nav-bar>
		<view class="number" v-if="money && money[moneyType[type]]">
			<view class="label">{{title[type]}}：</view>{{money[moneyType[type]].money}}
			<view class="btns">
				<template v-if="type==1">
					<button class="btn" @click="exchange" type="default">兑换</button>
					<button class="btn" @click="upgrade" type="default">升级</button>
				</template>
				<template v-if="type==2">
					<button class="btn" @click="transferOpen" type="default">转账</button>
					<button class="btn" @click="exchange" type="default">兑换</button>
				</template>
			</view>
		</view>
		<view class="list-content">
			<uni-title type="h3" :title="title[type]+'明细'"></uni-title>
			<view class="list">
				<view class="item" v-for="(item,index) in moneyInfoList" :key="index">
					<view class="left">
						<view class="title">{{item.bak}}</view>
						<view class="date">{{formatDate(item.createdTime)}}</view>
					</view>
					<view class="right">
						<view class="num1">{{item.money}}</view>
					</view>
				</view>
			</view>
		</view>
		
		<uni-popup ref="inputDialog" type="dialog">
			<template v-if="type=='1'">
				<uni-popup-dialog ref="inputClose"  mode="input" :title="popupTitle" value=""
					placeholder="请输入贡献值" @confirm="dialogInputConfirm"></uni-popup-dialog>
			</template>
			<template v-if="type=='2' && istransf">
				<uni-popup-dialog ref="inputClose"  mode="input" :title="popupTitle" value=""
					placeholder="请输入对方的用户名/昵称" @confirm="dialogInputConfirm"></uni-popup-dialog>
			</template>
			<template v-if="type=='2' && !istransf">
				<uni-popup-dialog ref="inputClose"  mode="input" :title="popupTitle" value=""
						placeholder="请输入金额" @confirm="dialogInputConfirm2"></uni-popup-dialog>
			</template>
		</uni-popup>
		
		<!-- more、loading、noMore -->
		<uni-load-more v-if="moneyInfoList.length==0" :status="status" />
	</view>
</template>

<script>
export default {
	data() {
		return {
			title: {
				'1': '贡献值',
				'2': '余额',
				'3': 'usdt',
			},
			moneyType: {
				'1': 'jnb',
				'2': 'balance',
				'3': 'usdt',
			},
			type: '',
			status: 'loading',
			handle: '',
			popupTitle: '兑换',
			transf: {
				money: '',
				id: ''
			},
			moneyInfoList: [],
			istransf: false,
		}
	},
	onLoad(options) {
		this.type=options.type;
	},
	onShow(){
		this.getMoneyInfo();
	},
	methods: {
		getMoneyInfo(){
			this.$http({
				url: `/user/money_info`,
				method: "POST",
				data: {
					moneyType: this.moneyType[this.type],
					userId: this.userInfo.id,
					pageNo: '1',
					pageSize: '200',
				}
			}).then((res) => {
				if(res.records && res.records.length>0){
					this.moneyInfoList=res.records;
				}else{
					this.status='noMore'
				}
			})
		},
		exchange(){
			this.istransf=false
			this.popupTitle='兑换';
			this.$refs.inputDialog.open()
		},
		upgrade(){
			this.$http({
				url: `/user/upgrade/${this.userInfo.id}`,
				method: "GET",
			}).then((res) => {
				uni.showModal({
					title: '提示',
					content: '是否确认升级',
					success: (cres)=>{
						if (cres.confirm) {
							this.userStore.setMoney(res);
							this.getMoneyInfo();
							uni.showToast({
								title: "升级成功",
								icon: 'none'
							})
						} else if (cres.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			})
		},
		close(){
			this.$refs.inputDialog.close()
		},
		transferOpen(){
			this.istransf=true;
			this.popupTitle='转账';
			this.$refs.inputDialog.open()
		},
		transfer(){
			uni.showLoading();
			this.$http({
				url: `/user/find/${this.transf.id}`,
				method: "GET",
			}).then((res) => {
				uni.hideLoading()
				if(!res.id) return;
				this.$refs['transfForm'].validate().then(res => {
					this.dialogInputConfirm()
				}).catch(err => {
					console.log('err', err);
				})
			}).catch(()=>{
				uni.hideLoading()
			})
		},
		formatDate(isoString) {
			if(!isoString) return '';
		  const date = new Date(isoString);
		  
		  const year = date.getFullYear();
		  const month = String(date.getMonth() + 1).padStart(2, '0');
		  const day = String(date.getDate()).padStart(2, '0');
		  const hours = String(date.getHours()).padStart(2, '0');
		  const minutes = String(date.getMinutes()).padStart(2, '0');
		  const seconds = String(date.getSeconds()).padStart(2, '0');
		  
		  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
		},
		dialogInputConfirm2(money){
			this.$http({
				url: '/user/exchange_money',
				method: "POST",
				data: {
					userId: this.userInfo.id,
					money
				}
			}).then((res) => {
				if((res && res.length>0) || res.id){
					this.userStore.setMoney(res);
				}
				uni.showToast({
					title: '兑换贡献值成功',
					icon: 'none'
				})
				this.getMoneyInfo();
				this.close();
			})
		},
		dialogInputConfirm(money){
			let url='',data={},title='';
			if(this.type=='1'){
				url='/user/exchange';
				data={
					userId: this.userInfo.id,
					money
				};
				title='兑换成功';
			}else if(this.type=='2'){
				uni.navigateTo({
					url: `/pages/mine/mine-transfer?searchText=${money}&money=${this.money[this.moneyType[this.type]].money}`
				})
			}
			this.$http({
				url,
				method: "POST",
				data
			}).then((res) => {
				console.log(res,'---185')
				this.userStore.setMoney(res);
				uni.showToast({
					title,
					icon: 'none'
				})
				this.getMoneyInfo();
				this.close();
			})
		},
		
	},
	computed: {
		userInfo() {
			return this.userStore.userInfo;
		},
		money() {
			return this.userStore.money;
		}
	}
}
</script>

<style scoped lang="scss">
	.mine-detail{
		padding: 20rpx;
	}
	.number{
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		margin-bottom: 30rpx;
		padding: 50rpx;
		font-size: 50rpx;
		background-color: #8ea4e5;
		border-radius: 10rpx;
		color: #fff;
		.label{
			font-size: 28rpx;
		}
	}
	.list-content{
		.item{
			display: flex;
			align-items: center;
			padding: 20rpx;
			color: #333;
			border-bottom: 1px solid #eee;
			background-color: #fff;
		}
		.left{
			flex: 1;
			overflow: hidden;
			font-size: 22rpx;
		}
		.right{
			flex-shrink: 0;
		}
		.title{
			margin-bottom: 15rpx;
			margin-right: 20rpx;
			font-size: 24rpx;
		}
		.date{
			color: #999;
		}
		.right{
			text-align: right;
		}
		.num1{
			margin-bottom: 15rpx;
			font-size: 28rpx;
			font-weight: bold;
		}
		.num2{
			font-size: 24rpx;
			color: #999;
		}
	}
	.btns{
		position: absolute;
		right: 20rpx;
		.btn{
			width: 100rpx;
			padding: 0;
			margin: 20rpx 0;
			font-size: 20rpx !important;
			color: #fff;
			background-color: #c12ab5;
			border-radius: 5rpx;
			&::after{
				border: none;
			}
		}
		.btn{
			  max-width: 300px;
			  
			  /* 视觉设计 */
			  background: linear-gradient(135deg, #07C160, #05a854); /* 渐变绿色 */
			  color: #fff;
			  border: none;
			  border-radius: 12px;           /* 更大的圆角符合移动端设计趋势 */
			  box-shadow: 0 4px 12px rgba(7, 193, 96, 0.3); /* 带品牌色的阴影 */
			  
			  /* 文字样式 */
			  font-size: 18px;               /* 加大字号 */
			  font-weight: 600;             /* 中等加粗 */
			  letter-spacing: 1px;          /* 轻微字距提升可读性 */
			  
			  /* 交互效果 */
			  transition: all 0.2s;
			  -webkit-tap-highlight-color: transparent; /* 移除点击时的灰色高亮 */
			  &::after{
			  	border: none;
			  }
		}
	}
	.form{
		padding: 25px 20rpx 20rpx;
		background-color: #fff;
		border-radius: 11px;
		.form-btn{
			display: flex;
		}
		.btn{
			font-size: 16px;
			&:nth-child(1){
				color: #000;
			}
			&:nth-child(2){
				color: #007aff;
			}
		}
	}
</style>
